<template>
  <card class="add-info-card" title="车辆信息" toggle>
    <div class="section-item">
      <div class="section-item-content">
        <a-descriptions :size="'medium'" :align="{ label: 'right' }">
          <a-descriptions-item label="车牌号">{{ orderDetails.licenseNo }}</a-descriptions-item>
          <a-descriptions-item label="车型">{{ orderDetails.carModelName }}</a-descriptions-item>
          <a-descriptions-item label="所属门店">{{ orderDetails.siteName }}</a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
  </card>
  <card class="add-info-card" title="ETC信息" toggle>
    <div class="section-item">
      <div class="section-item-content">
        <a-descriptions :size="'medium'" :align="{ label: 'right' }">
          <a-descriptions-item label="ETC设备号">{{ orderDetails.etcCode }}</a-descriptions-item>
          <a-descriptions-item label="ETC卡号">{{ orderDetails.icCardNo }}</a-descriptions-item>
          <a-descriptions-item label="ETC服务商">{{ orderDetails.etcSourceName }}</a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
  </card>
  <card class="add-info-card" title="ETC租赁信息" toggle>
    <template #title>
      <span style="margin-right: 10px">租赁信息</span>
      <tag type="primary">{{ orderDetails.orderStatusName }}</tag>
    </template>
    <div class="section-item">
      <div class="section-item-content">
        <a-descriptions :size="'medium'" :align="{ label: 'right' }">
          <a-descriptions-item label="ETC订单号">{{ orderDetails.orderCode }}</a-descriptions-item>
          <a-descriptions-item label="预计周期">
            <div v-if="orderDetails.actualStartTime && orderDetails.endTime">
              {{ orderDetails.actualStartTime }} 至 {{ orderDetails.endTime }}
            </div>
          </a-descriptions-item>
          <a-descriptions-item label="租期">{{ orderDetails.rentDays }}</a-descriptions-item>
          <a-descriptions-item label="实际周期">
            <div v-if="orderDetails.actualStartTime"> {{ orderDetails.actualStartTime }} 至 {{ orderDetails.actualEndTime || '-' }} </div>
          </a-descriptions-item>
          <a-descriptions-item label="下单人手机号">{{ orderDetails.mobile }}</a-descriptions-item>
          <a-descriptions-item label="下单时间">{{ orderDetails.orderCreateTime }}</a-descriptions-item>
          <a-descriptions-item label="备注">{{ orderDetails.remark || '-' }}</a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
  </card>
  <card class="add-info-card" title="关联订单信息" toggle>
    <div class="section-item">
      <div class="section-item-content">
        <a-descriptions :size="'medium'" :align="{ label: 'right' }">
          <a-descriptions-item label="业务类型">{{ orderDetails.refId ? orderDetails.refTypeName : '-' }}</a-descriptions-item>
          <a-descriptions-item label="订单号">
            <div v-if="orderDetails.refCode">
              <div>自有</div>
              <a-link class="order-info-item a-link" @click="() => toRefOrder(orderDetails)">
                {{ orderDetails.refCode }}
              </a-link>
            </div>
            <div v-if="orderDetails.channelOrderCode">
              <div>{{ orderDetails.channelTypeName }}</div>
              <a-link class="order-info-item a-link" @click="() => toRefOrder(orderDetails)">
                {{ orderDetails.channelOrderCode }}
              </a-link>
            </div>
          </a-descriptions-item>
          <a-descriptions-item label="租赁周期">
            <div v-if="orderDetails.orderStartTime && orderDetails.orderEndTime">
              {{ orderDetails.orderStartTime }} 至 {{ orderDetails.orderEndTime }}
            </div>
          </a-descriptions-item>
          <a-descriptions-item label="承租人信息">{{ orderDetails.memberName }}{{ orderDetails.memberPhone }}</a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
  </card>
</template>

<script setup>
  import { onMounted, ref } from 'vue'
  import { getDetailApi } from '@/api/order/etcOrder'
  import { usePermission } from '@/hooks/usePermission'
  import useNavigate from '@/hooks/useNavigate'
  const { navigateTo } = useNavigate()

  const orderDetails = ref({})

  const props = defineProps({
    orderId: String,
  })
  const getDetails = () => {
    getDetailApi({ id: props.orderId }).then((res) => {
      orderDetails.value = res.result
    })
  }
  // 跳转长租，短租详情
  const toRefOrder = (val) => {
    if (val.refType == '1') {
      if (usePermission('svms:order:short-order.detail')) {
        navigateTo(`/short-order/detail/${val.refId}`, `${val.refCode}-短租详情`)
      }
    } else {
      if (usePermission('svms:order:long-order.detail')) {
        navigateTo(`/long-order/detail/${val.refId}`, `${val.refCode}-长租详情`)
      }
    }
  }
  onMounted(() => {
    getDetails()
  })
</script>

<style lang="less" scoped>
  .a-link {
    color: rgba(24, 144, 255, 1);
  }
</style>
